<template>
  <h1>{{ num }}</h1>
  <div>
    <span :class="classObj">{{ result }}</span>
    <button @click="addNum1">+2</button>
    <button @click="addNum2">+5</button>
    <button @click="setResult">setResult</button>  
  </div>
  <div>
    <h2>列表</h2>
    <template v-for="(item, i) in list" >
      <div class="list-item" @click="handlerListItem(item, $event)" v-if="i%2==0">
      {{ item }}
    </div>
    </template>
    <input type="text" v-focus v-model.number="inputValue" @change="() => console.log(inputValue)">
  </div>
</template>reactive, , toRef
<script lang="ts" setup>
import { computed, inject, reactive, ref } from 'vue';

  const list = reactive([1,2,3,4,5,4,3,2,1])
  const num1 = ref('1')
  const num2 = ref('2')
  const inputValue = ref('1')
  const addNum1 = () => {
    num1.value += '2'
    console.log()
  }
  const addNum2 = (event: any) => {
    console.log(event)
    num2.value += '5'
  }
  defineExpose({
    num1: num1.value
  })
  const num = inject('num')
  // const enterHandler = (value: KeyboardEvent) => {
  //   console.log(value)
  // }
  function handlerListItem(data: number, eventObj: any) {
    console.log(data, eventObj)
  }
  const result = computed({
    get() {
      return `${num1.value}-${num2.value}`
    },
    set(value) {
      console.log(value)
      num1.value = value.split('-')[0]
      num2.value = value.split('-')[1]?value.split('-')[1] : ''
    }
  })
  function setResult() {
    result.value = '1000-2000'
  }
  // const classObj = computed(() => ({
  //   fontColor: true,
  //   fontSize: num1.value.length % 2===0
  // }))
  const classObj = computed(() => ['fontColor', num1.value.length%2===0?'fontSize':''])
  // const getResult = () => {
  //   return num1.value + num2.value
  // }
</script>
<style lang="scss">
.fontColor{
  color: #FF0000
}
.fontSize {
  font-size: 20px
}
</style>